<template>
  <div>
    <hr>
    <el-form :inline="true" label-width="100px" label-position="right" >
      <fieldset>
        <legend>&nbsp;客户信息&nbsp;</legend>
        <el-form-item label="客户名称">
          <el-input auto-complete="off" v-model="layer_data.customerName"></el-input>
        </el-form-item>
        <el-form-item label="客户电话">
          <el-input auto-complete="off" v-model="layer_data.customerPhone"></el-input>
        </el-form-item>
        <!-- deliverGoodsTime -->
        <el-form-item label="发货时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="layer_data.deliverGoodsTime"
          ></el-date-picker>
        </el-form-item>
        <div></div>
        <el-form-item label="收获地址">
          <el-cascader
            :options="Area"
            change-on-select
            placeholder="目的地"
            style="width:297px"
            v-model="layer_data.p_c_a"
          ></el-cascader>
          <el-input auto-complete="off" v-model="layer_data.street"  style="width: 520px!important;"></el-input>
        </el-form-item>
        <!--<el-form-item label="-">-->
          <!--<el-input auto-complete="off" v-model="data.streetAddress"  style="width: 360px!important;"></el-input>-->
        <!--</el-form-item>-->
      </fieldset>
      <fieldset>
        <legend>&nbsp;订单信息&nbsp;</legend>
        <el-form-item label="订单类型">
          <el-select class="by-input-all" v-model="layer_data.orderType"  placeholder="订单类型" size="small">
            <!--'SEND', 'RETAIL', 'MERCHANT', 'DISTRIBUTOR'-->
            <el-option v-for ='(item,index) in Lists.orderType' :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select class="by-input-all" v-model="layer_data.orderStatus"  placeholder="订单状态" size="small">
            <!--'NEW', 'DELIVERED', 'CANCEL'-->
            <el-option v-for ='(item,index) in Lists.orderStatus'
                       :key="index"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付状态">
          <el-select class="by-input-all" v-model="layer_data.isPay"  placeholder="支付平台" size="small">
            <el-option v-for ='(item,index) in Lists.isPay'
                       :key="index"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付平台">
          <el-select class="by-input-all" v-model="layer_data.payWay"  placeholder="支付平台" size="small">
            <el-option v-for ='(item,index) in Lists.payWay'
                       :key="index"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="押金">
          <el-input class="by-input-all" auto-complete="off" v-model="layer_data.deposit">
            <template slot="suffix">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="订单总金额">
          <el-input class="by-input-all" auto-complete="off" v-model="layer_data.totalMoney">
            <template slot="suffix">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="实际支付金额">
          <el-input class="by-input-all" auto-complete="off" v-model="layer_data.actualMoney">
            <template slot="suffix">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input auto-complete="off" v-model="layer_data.remarks"></el-input>
        </el-form-item>
      </fieldset>
      <fieldset>
        <legend>&nbsp;货运部信息&nbsp;</legend>
        <el-form-item label="货运部名称">
          <el-input auto-complete="off" v-model="layer_data.freight"></el-input>
        </el-form-item>
        <el-form-item label="货运部电话">
          <el-input auto-complete="off" v-model="layer_data.freightPhone"></el-input>
        </el-form-item>
        <el-form-item label="货运部地址">
          <el-input auto-complete="off" style="width: 520px" v-model="layer_data.freightAddress"></el-input>
        </el-form-item>
      </fieldset>
      <fieldset>
        <legend>&nbsp;货物信息&nbsp;</legend>
        <fieldset v-if="order_detail_info_clone.chair.length">
          <legend>&nbsp;餐椅信息&nbsp;</legend>
          <el-card v-for="(i,index) in order_detail_info_clone.chair" :key="index">
            <el-form-item label="餐椅型号">
              <el-select v-model="i.type" filterable placeholder="请选择">
                <el-option v-for="(item,index) in $store.state.chairList" :key="index" :label="item.value+'('+item.name+')'"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="餐椅颜色">
              <el-select v-model="i.color" filterable placeholder="请选择">
                <el-option v-for="(item,index) in $store.state.colorList" :key="index" :label="item.name"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="坐板类型">
              <el-select v-model="i.board" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.boardList" :key="item.value" :label="item.name"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="餐椅数量">
              <el-input type="number" v-model="i.number"></el-input>
            </el-form-item>
            <el-form-item label="餐椅单位">
              <el-select v-model="i.unit" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.unitList" :key="item.value" :label="item.name"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-card>
        </fieldset>
        <fieldset v-if="order_detail_info_clone.table.length">
          <legend>&nbsp;餐桌信息&nbsp;</legend>
          <el-card v-for="(i,key) in order_detail_info_clone.table" :key="key">
            <el-form-item label="桌架型号">
              <el-select v-model="i.type" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.tableList" :key="item.value" :label="item.value+'('+item.name+')'"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="桌架颜色">
              <el-select v-model="i.color" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.colorList" :key="item.value" :label="item.name"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="桌架尺寸">
              <el-select v-model="i.size" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.tableSizeList" :key="item.value" :label="item.name"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="桌架数量">
              <el-input type="number" v-model="i.number"></el-input>
            </el-form-item>
            <el-form-item label="桌架材质">
              <el-select v-model="i.material" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.materialList" :key="item.value" :label="item.name"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <!--<el-form-item  label="桌架单位">-->
            <!--<el-select v-model="billInfo.tableInfo.unit" filterable placeholder="请选择">-->
            <!--<el-option v-for="item in $store.state.unitList" :key="item.value" :label="item.name" :value="item"></el-option>-->
            <!--</el-select>-->
            <!--</el-form-item>-->
            <el-form-item label="桌脚名称">
              <el-select v-model="i.footer" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.footerList" :key="item.value" :label="item.name"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="桌脚材质">
              <el-select v-model="i.footerMaterial" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.materialList" :key="item.value" :label="item.name"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="台面型号">
              <el-select v-model="i.desktop" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.desktopList" :key="item.value" :label="item.value+'('+item.name+')'"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-card>
        </fieldset>
        <fieldset v-if="order_detail_info_clone.tea.length">
          <legend>&nbsp;茶几信息&nbsp;</legend>
          <el-card v-for="(i,index) in order_detail_info_clone.tea" :key="index">
            <el-form-item label="茶几型号">
              <el-select v-model="i.type" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.teaTableList" :key="item.value" :label="item.value+'('+item.name+')'"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="茶几颜色">
              <el-select v-model="i.color" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.colorList" :key="item.value" :label="item.name"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="茶几尺寸">
              <el-select v-model="i.size" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.teaTableSizeList" :key="item.value" :label="item.name"
                           :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="茶几数量">
              <el-input type="number" v-model="i.number" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="台面型号">
              <el-select v-model="i.desktop" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.desktopList" :key="item.value" :label="item.value+'('+item.name+')'"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-card>
        </fieldset>
        <fieldset v-if="order_detail_info_clone.tv.length">
          <legend>&nbsp;电视柜信息&nbsp;</legend>
          <el-card v-for = '(i,index) in order_detail_info_clone.tv' :key="index">
            <el-form-item label="电视柜型号">
              <el-select v-model="i.type" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.tvTableList" :key="item.value" :label="item.value+'('+item.name+')'"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="电视柜颜色">
              <el-select v-model="i.color" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.colorList" :key="item.value" :label="item.name"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="电视柜尺寸">
              <el-select v-model="i.size" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.tvTableSizeList" :key="item.value" :label="item.name"
                           :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="电视柜数量">
              <el-input type="number" v-model="i.number" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="台面型号">
              <el-select v-model="i.desktop" filterable placeholder="请选择">
                <el-option v-for="item in $store.state.desktopList" :key="item.value" :label="item.value+'('+item.name+')'"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-card>
        </fieldset>
        <fieldset v-if="order_detail_info_clone.remark.length">
          <legend>&nbsp;备注&nbsp;</legend>
            <el-input
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 4}"
              placeholder="请输入内容"
              v-for="(i,index) in order_detail_info_clone.remark"
              v-model="i.remark"
              :key="index">
            </el-input>
        </fieldset>
      </fieldset>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelEdit">取 消</el-button>
      <el-button type="primary" @click="confirmEdit">确 定</el-button>
    </div>
  </div>
</template>

<script type="text/javascript">
  import Area from '~/data/area'
  export default{
    name: 'order-detail-layer',
    props: {
      layer_data: '',
      dialog_form_visible: '',
      order_detail_info_clone: ''
    },
    watch: {
      layer_data: {
        handler: function(val, oldVal) {
          console.log('改变了', val)
        },
        deep: true
      }
    },
    created() {},
    data() {
      return {
        data: {},
        Area,
        destinationCodeArr: [],
        formData: {
          select: ''
        }
      }
    },
    methods: {
      cancelEdit: function() {
        console.log('parentData', this.layer_data)
        this.$emit('cancelEdit', {
          way: 'cancel',
          close: true
        })
      },
      confirmEdit: function() {
        const that = this
        this.$emit('cancelEdit', {
          way: 'confirm',
          close: true,
          formData: that.formData
        })
      }
    }
  }
</script>

<style type="text/scss" scoped="">

</style>
